import React, { Component } from "react";
import { Form, Input, Button, Row, Col, Divider } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { validate_password } from "../../utils/validate";
import { Login } from "../../api/account.js";
export default class LoginForm extends Component {
  onFinish = (values) => {
    console.log("Received values of form: ", values);
    Login(values)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  render() {
    return (
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,
        }}
        onFinish={this.onFinish}
      >
        <Form.Item
          name="email"
          rules={[
            {
              required: true,
              message: "请输入邮箱",
            },
            {
              type: "email",
              message: "邮箱格式不正确",
            },
          ]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="email"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: "密码不能为空",
            },
            {
              min: 6,
              message: "不能小于6位",
            },
            {
              pattern: validate_password,
              message: "请输入大于6位小于20位的字母+数字",
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            placeholder="password"
          />
        </Form.Item>
        <Form.Item
          name="code"
          rules={[
            {
              required: true,
              message: "验证码不能为空",
            },
            {
              len: 6,
              message: "请输入长度为6位的验证码",
            },
          ]}
        >
          <Row gutter={13}>
            <Col span={15}>
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                placeholder="code"
              />
            </Col>
            <Col span={9}>
              <Button type="danger" block>
                获取验证码
              </Button>
            </Col>
          </Row>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            block
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    );
  }
}
